<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>mbContainers lightBox</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

	<link rel="stylesheet" type="text/css" href="css/mbContainer.css" title="style"  media="screen"/>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="inc/ui.core.min.js"></script>
	<script type="text/javascript" src="inc/ui.draggable.min.js"></script>
	<script type="text/javascript" src="inc/ui.resizable.min.js"></script>
	<script type="text/javascript" src="inc/mbContainer.js"></script>
	<script type="text/javascript" src="inc/jquery.metadata.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".containerPlus").buildContainers();
			$(".lightBox").click(function(){$("#box").fadeOut()})
		});
	</script>
	<style type="text/css">

		#Box{
			position:absolute;
			top:0;
			left:0px;
			width:100%;
			height:100%;
			display:none;
			background:url(elements/screenBgnd.gif)
		}
		.lightBox{
			position:absolute;
			top:0;
			left:0px;
			width:100%;
			height:100%;
		}
		#box .containerPlus{
			position:relative; margin:10% auto;
		}

	</style>


</head>
<body bgcolor="darkkhaki">
<p onclick="$('#box').fadeIn()">open window</p>
<div id="box" style="display:none;">
	<div class="lightBox" style="vertical-align: middle"> </div>
		<div class="containerPlus resizable {width:400, height:200, buttons:'m', skin:'white'}" >
			<div class="no"><div class="ne"><div class="n">left content</div></div>
				<div class="o"><div class="e"><div class="c">
					<div class="mbcontainercontent">

						<h3>E qui va il contenuto!</h3>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.</p>
						<p>Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!</p>

					</div>
				</div></div></div>
				<div >
					<div class="so"><div class="se"><div class="s"></div></div></div>
				</div>
			</div>
		</div>
</div>
<img src="valid-xhtml10.png" alt="vaildW3c">
</body>
</html>